{% extends 'blog_base.html' %}
{% block title %}
    博客详情
{% endblock %}
{% block main %}
    {% csrf_token %}
    <h1>博客详情</h1>
    <hr>
    <div class="mb-2">
        <img src="{% static 'image/cat.png' %}" class="rounded-circle" height="30" alt="">
        <span class="ms-2">{{ blog.author.username }}</span>
        <span class="ms-2">于</span>
        <span class="ms-2">{{ blog.pub_time|date:"Y年m月d日 h时i分" }}</span>发布
    </div>
    <hr>
    <div class="py-2">
        {{ blog.content|safe }}
    </div>
    <hr>
    <div class="mt-2">
        <h3>评论({{ blog.comments.all|length }})</h3>
        <!--发布评论-->
        <form action="{% url 'bootstrapApp:pub_comment' %}" method="POST">
            {% csrf_token %}
            <input type="hidden" name="blog_id" value="{{ blog.id }}">
            <div class="mt-2">
                <input type="text" class="form-control" placeholder="请输入评论" name="content">
            </div>
            <div class="text-end mt-2">
                <button type="submit" class="btn btn-primary">评论</button>
            </div>
        </form>

        <ul class="list-group list-group-flush">
            <!--渲染评论功能-->
            {% for comment in blog.comments.all %}
                <li class="list-group-item ">
                    <div class="d-flex justify-content-between text-body-secondary">
                        <div>
                            <img src="{% static 'image/cat.png' %}" class="rounded-circle" height="30" alt="">
                            <span>{{ comment.author.username }}</span>
                        </div>
                        <div class="creat-time" style="line-height: 40px">
                            {{ comment.pub_time|date:"Y年m月d日 h时i分" }}
                        </div>
                    </div>
                    <div class="my-2">
                        {{ comment.content }}
                    </div>
                </li>
            {% endfor %}


            {#            <li class="list-group-item ">A second item</li>#}
            {#            <li class="list-group-item">A third item</li>#}
            {#            <li class="list-group-item">A fourth item</li>#}
            {#            <li class="list-group-item">And a fifth one</li>#}
        </ul>
    </div>
{% endblock %}